import React from 'react';
import { Row, Col, Card, Form, Input, Button, message, Divider } from 'antd';
import { 
  PhoneOutlined, 
  MailOutlined, 
  EnvironmentOutlined,
  ClockCircleOutlined,
  SendOutlined
} from '@ant-design/icons';
import styled from 'styled-components';
import config from "@/constant";

const { TextArea } = Input;

const PageHeader = styled.div`
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 120px 0 80px;
  text-align: center;
  margin-top: 64px;
`;

const PageTitle = styled.h1`
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  
  @media (max-width: 768px) {
    font-size: 32px;
  }
`;

const PageSubtitle = styled.p`
  font-size: 20px;
  opacity: 0.9;
  
  @media (max-width: 768px) {
    font-size: 16px;
  }
`;

const Section = styled.div`
  padding: 80px 0;
  
  @media (max-width: 768px) {
    padding: 40px 0;
  }
`;

const ContactCard = styled(Card)`
  height: 100%;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  .ant-card-body {
    padding: 40px 30px;
  }
`;

const ContactItem = styled.div`
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  
  .anticon {
    font-size: 24px;
    color: #1890ff;
    margin-right: 15px;
    width: 24px;
  }
`;

const ContactInfo = styled.div`
  h4 {
    margin-bottom: 8px;
    color: #333;
  }
  
  p {
    color: #666;
    margin: 0;
  }
`;

const MapContainer = styled.div`
  height: 300px;
  background: #f0f2f5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 16px;
`;

const Contact: React.FC = () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Form values:', values);
    message.success('消息已发送，我们会尽快回复您！');
    form.resetFields();
  };

  const contactInfo = [
    {
      icon: <PhoneOutlined />,
      title: '电话咨询',
      content: '400-123-4567',
      description: '工作日 9:00-18:00'
    },
    {
      icon: <MailOutlined />,
      title: '邮件联系',
      content: 'contact@company.com',
      description: '24小时内回复'
    },
    {
      icon: <EnvironmentOutlined />,
      title: '公司地址',
      content: '浙江省杭州市xxx大厦',
      description: '地铁10号线xxx站A出口'
    },
    {
      icon: <ClockCircleOutlined />,
      title: '工作时间',
      content: '周一至周五',
      description: '9:00-18:00 (节假日除外)'
    }
  ];

  return (
    <div>
      {/* 页面头部 */}
      <PageHeader>
        <div className="container">
          <PageTitle>联系我们</PageTitle>
          <PageSubtitle>我们期待与您建立联系，为您提供最优质的服务</PageSubtitle>
        </div>
      </PageHeader>

      {/* 联系信息 */}
      <Section>
        <div className="container">
          <Row gutter={[48, 24]}>
            <Col xs={24} md={12}>
              <ContactCard>
                <h2 style={{ marginBottom: 30, fontSize: 28 }}>联系信息</h2>
                {contactInfo.map((info, index) => (
                  <ContactItem key={index}>
                    {info.icon}
                    <ContactInfo>
                      <h4>{info.title}</h4>
                      <p style={{ fontSize: 16, fontWeight: 'bold', color: '#1890ff' }}>
                        {info.content}
                      </p>
                      <p>{info.description}</p>
                    </ContactInfo>
                  </ContactItem>
                ))}
              </ContactCard>
            </Col>
            
            <Col xs={24} md={12}>
              <ContactCard>
                <h2 style={{ marginBottom: 30, fontSize: 28 }}>发送消息</h2>
                <Form
                  form={form}
                  layout="vertical"
                  onFinish={onFinish}
                >
                  <Row gutter={16}>
                    <Col span={12}>
                      <Form.Item
                        name="name"
                        label="姓名"
                        rules={[{ required: true, message: '请输入您的姓名' }]}
                      >
                        <Input placeholder="请输入您的姓名" />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                      <Form.Item
                        name="phone"
                        label="电话"
                        rules={[{ required: true, message: '请输入您的电话' }]}
                      >
                        <Input placeholder="请输入您的电话" />
                      </Form.Item>
                    </Col>
                  </Row>
                  
                  <Form.Item
                    name="email"
                    label="邮箱"
                    rules={[
                      { required: true, message: '请输入您的邮箱' },
                      { type: 'email', message: '请输入有效的邮箱地址' }
                    ]}
                  >
                    <Input placeholder="请输入您的邮箱" />
                  </Form.Item>
                  
                  <Form.Item
                    name="subject"
                    label="主题"
                    rules={[{ required: true, message: '请输入消息主题' }]}
                  >
                    <Input placeholder="请输入消息主题" />
                  </Form.Item>
                  
                  <Form.Item
                    name="message"
                    label="消息内容"
                    rules={[{ required: true, message: '请输入消息内容' }]}
                  >
                    <TextArea 
                      rows={6} 
                      placeholder="请详细描述您的需求或问题"
                    />
                  </Form.Item>
                  
                  <Form.Item>
                    <Button 
                      type="primary" 
                      htmlType="submit" 
                      size="large"
                      icon={<SendOutlined />}
                      style={{ width: '100%' }}
                    >
                      发送消息
                    </Button>
                  </Form.Item>
                </Form>
              </ContactCard>
            </Col>
          </Row>
        </div>
      </Section>

      {/* 地图和交通 */}
      <Section style={{ background: '#f5f5f5' }}>
        <div className="container">
          <Row gutter={[48, 24]}>
            <Col xs={24} md={12}>
              <h2 style={{ marginBottom: 30, fontSize: 28 }}>公司位置</h2>
              <MapContainer>
                <div style={{ textAlign: 'center' }}>
                  <EnvironmentOutlined style={{ fontSize: 48, color: '#1890ff', marginBottom: 16 }} />
                  <p>地图加载中...</p>
                  <p>{config.address}</p>
                </div>
              </MapContainer>
            </Col>
            
            <Col xs={24} md={12}>
              <h2 style={{ marginBottom: 30, fontSize: 28 }}>交通指南</h2>
              <div style={{ background: 'white', padding: 30, borderRadius: 8 }}>
                <h3 style={{ marginBottom: 20, color: '#1890ff' }}>地铁</h3>
                <p style={{ marginBottom: 20, lineHeight: 1.6 }}>
                  地铁10号线xxx站A出口，步行约5分钟即可到达
                </p>
                
                <h3 style={{ marginBottom: 20, color: '#1890ff' }}>公交</h3>
                <p style={{ marginBottom: 20, lineHeight: 1.6 }}>
                  乘坐xxx路、xxx路公交车，在xxx站下车
                </p>
                
                <h3 style={{ marginBottom: 20, color: '#1890ff' }}>自驾</h3>
                <p style={{ lineHeight: 1.6 }}>
                  导航至"xxx大厦"，大厦设有地下停车场
                </p>
              </div>
            </Col>
          </Row>
        </div>
      </Section>

      {/* 常见问题 */}
      <Section>
        <div className="container">
          <h2 style={{ textAlign: 'center', marginBottom: 50, fontSize: 36 }}>常见问题</h2>
          <Row gutter={[24, 24]}>
            <Col xs={24} md={8}>
              <ContactCard>
                <h3 style={{ marginBottom: 16, color: '#1890ff' }}>如何开始合作？</h3>
                <p style={{ color: '#666', lineHeight: 1.6 }}>
                  您可以通过电话、邮件或在线表单联系我们，我们会安排专业顾问与您详细沟通需求。
                </p>
              </ContactCard>
            </Col>
            <Col xs={24} md={8}>
              <ContactCard>
                <h3 style={{ marginBottom: 16, color: '#1890ff' }}>项目周期多久？</h3>
                <p style={{ color: '#666', lineHeight: 1.6 }}>
                  项目周期根据具体需求而定，一般小型项目1-2个月，大型项目3-6个月。
                </p>
              </ContactCard>
            </Col>
            <Col xs={24} md={8}>
              <ContactCard>
                <h3 style={{ marginBottom: 16, color: '#1890ff' }}>是否提供售后服务？</h3>
                <p style={{ color: '#666', lineHeight: 1.6 }}>
                  是的，我们提供一年的免费维护服务，之后可选择续费维护或按次收费。
                </p>
              </ContactCard>
            </Col>
          </Row>
        </div>
      </Section>
    </div>
  );
};

export default Contact; 